<script setup>
import { ref, computed, provide, nextTick, onMounted } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
import Logo from "./logo/index.vue";
import Menu from "./menu/index.vue";
import NavBar from "./navBar/NavBar.vue";
import Main from "./main.vue";

import { useStore } from "vuex";
const store = useStore();

onMounted(() => {
  const erd = elementResizeDetectorMaker();
  nextTick(() => {
    erd.listenTo(document.body, (e) => {
      if (e.offsetWidth < 992) {
        store.dispatch("webset/changeCollapsed", true);
      } else {
        store.dispatch("webset/changeCollapsed", false);
      }
    });
  });
});

// 菜单是否收起状态
const isCollapsed = computed(() => {
  return store.getters["webset/isCollapsed"];
});
</script>

<template>
  <a-layout class="basic-layout">
    <a-layout-sider
      :width="256"
      collapsedWidth="65"
      class="basic-layout-sider"
      :collapsed="isCollapsed"
    >
      <Logo />
      <Menu />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="base-layout-header">
        <NavBar />
      </a-layout-header>
      <a-layout-content class="basic-layout-main">
        <Main />
        <a-layout-footer> footer </a-layout-footer>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style lang="less" scoped>
.basic-layout {
  width: 100%;
  height: 100vh;
}
.base-layout-header {
  padding: 0;
  height: auto;
  line-height: 1em;
}
.basic-layout-main {
  overflow: scroll;
}
.basic-layout-sider {
  // background: @layout-sider-background;
  box-shadow: @shadow-1-right;
  z-index: 999;
}
</style>
